<template>
  <div style="height: 800px;overflow:hidden;background-image:url(/loginbg.png);background-size: cover;">
        <el-row :gutter="40">
          <el-col :span="13"></el-col>
          <el-col :span="11">
              <div class="login" style="width: 425px;height: 480px;margin-top: 150px;margin-left: 150px">
                <div style="width: 400px;height: 460px;margin: 0 auto ">
                  <div class="form-wrap" >
                    <ul class="menu-tab" style="right: 30px;top: 10px;" >
                      <li :class="{ current: currentMenu === item.type }"
                          v-for="item in tabMenu"
                          :key="item.type"
                          @click="toggleMenu(item.type)">{{ item.label }}</li>
                    </ul>
                    <el-form v-if="currentMenu === 'account'" label-width="80px" label-position="top" style="color: black;margin-top: 40px" >
                      <el-form-item prop="phone" label="手机号">
                        <el-input placeholder="请输入手机号" v-model="user.phone"/>
                      </el-form-item>
                      <el-form-item prop="password" label="密码">
                        <el-input type="password" placeholder="请输入密码"  v-model="user.password"/>
                      </el-form-item>
                      <el-form-item prop="code">
                        <label class="form-label">验证码</label>
                        <el-row :gutter="10">
                          <el-col :span="14">
                            <el-input placeholder="输入验证码"></el-input>
                          </el-col>
                          <el-col :span="10">
                            <el-button type="success" class="el-button-block">获取验证码</el-button></el-col>
                        </el-row>
                      </el-form-item>
                      <el-form-item>
                        <el-button type="danger" style="width: 420px;margin: 20px 0 0 0" @click="login">登录</el-button>
                      </el-form-item>
                      <div class="ways" style="width: 70%">
                        <ul style="list-style-type: none;display: inline-block;position:relative;right: 50px">
                          <li><img src="qq.png" width="35px" height="35px"></li>
                          <li><img src="weixin.png" width="35px" height="35px"></li>
                          <li><img src="sina.png" width="35px" height="35px"></li>
                          <li><img src="ali.png" width="35px" height="35px"></li>
                        </ul>
                        <span style="position: absolute;bottom: 40px;right: 165px"><router-link to="/reg" style="color:black;text-decoration: none">点我注册</router-link></span>
                      </div>
                    </el-form>

                    <el-form v-if="currentMenu === 'scan'" >
                      <div style="width: 200px;height: 200px;margin: 50px auto">
                        <img src="erweima.png" style="width: 100%;height: 100%">
                      </div>
                      <span style="margin-left: 100px">微信扫码立即登录</span>
                    </el-form>
                  </div>
                </div>
              </div>
          </el-col>
        </el-row>
  </div>



</template>

<script setup>
import {ref} from "vue";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";

const user = ref({username:'',password:'',phone:''})
const login = ()=>{
  let data = qs.stringify(user.value);
  axios.post(BASE_URL+'/v1/users/login',data).then((response)=>{
    if (response.data.code === 2000){
      ElMessage.success('登录成功!');
      //注意:登录成功后还要保存用户信息
      let user = response.data.data;
      localStorage.user = JSON.stringify(user);
      // router.push('/');
      location.href='/';//登录成功存入信息后，自动刷新页面
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}
const currentMenu = ref('account'); // 初始选中的菜单项，默认为账号登录
const tabMenu = [
  { type: 'account', label: '账号登录' },
  { type: 'scan', label: '扫码登录' }
];
const toggleMenu = (type) => {
  currentMenu.value = type;
};

</script>


<style scoped>
.login {
  height: 100vh;
  background-color: #ffffff;

}

.form-wrap {
  width: 320px;
  margin: 0 auto;

}
.menu-tab {
  text-align: center;
  position: relative;
  li {
    display: inline-block;
    padding: 10px 24px;
    margin: 0 0;
    color: black;
    font-size: 20px;
    border-radius: 5px;
    cursor: pointer;
    &.current {
      background-color: rgba(0, 0, 0, 0.1);
    }
  }
}
.ways ul li {
  float: left;
  line-height: 18px;
  margin-left: 10px;
}
.form-label {
  display: block;
  color: #fff;
  font-size: 14px;
}
</style>